<template>
  <!-- 头部 -->
  <div>
  <el-row :gutter="20">
    <el-col :span="6" v-for="items in item" :key="items.id">
      <div class="grid-content bg-purple">
        <div class="top">
          <div class="top-rt">
            <span class="top-rt-s">{{items.name}}</span>
          </div>
          <span class="top-lt"><el-tag>今日</el-tag></span>
        </div>
        <div class="center">
          <span class="center-c">{{items.price}}</span>
        </div>
        <div class="bot">
          <div class="bot-rt">
            <span class="bot-rt-s">昨日数据</span>
          </div>
          <span class="bot-lt">{{items.cateNum}}</span>
        </div>
      </div>
    </el-col>
  </el-row>
  <el-row :gutter="20">
  <el-col :span="12" ><div ref="chart" style="height:400px" ></div></el-col>
  <!-- 地图 -->
  <el-col :span="12" ><div style="height:400px">
    <baidu-map style="height:400px" class="map" :center="{lng: 117.294708, lat: 31.856053}" :zoom="15"
    :scroll-wheel-zoom="true"  >
    <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
     <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
     <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
      <bm-marker :position="{lng: 117.294708, lat:  31.856053}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
      <bm-label content="瘦身训练营" :labelStyle="{color: 'red', fontSize : '12px'}" :offset="{width: -35, height: 30}"/>
        </bm-marker>
      </baidu-map>
      </div>
  </el-col>
  </el-row>
  <!-- 加个图 -->
   <el-row :gutter="20">
    <el-col :span="24" ><div ref="chart2" style="height:400px" ></div></el-col>
   </el-row>
  </div>
</template>

<script>
import { UpdateNum, ChartNumber, ChartNumber2 } from '_api'
export default {
  name: 'DashBoard',
  data () {
    return {
      chart: null,
      chart2: null,
      item: [],
      chartIcon: [],
      chartname: [],
      chartnum1: [],
      chartnum2: [],
      chartname1: [],
      chartnum11: [],
      chartnum21: [],
      // 指定图表的配置项和数据
      option: {
        title: {
          text: '产品所占比例'
        },
        backgroundColor: 'lightblue',
        series: [{
          type: 'pie',
          data: []
        }
        ]
      },
      // 指定图表的配置项和数据
      option1: {
        backgroundColor: '#ffffff',
        title: {
          text: '订单量/访问量'
        },
        tooltip: {},
        legend: {
          data: ['订单量', '访问量']
        },
        color: ['pink', 'lightblue'],
        xAxis: {
          data: []
        },
        yAxis: {},
        series: [
          {
            name: '订单量',
            type: 'scatter',
            data: []
          },
          {
            name: '访问量',
            type: 'bar',
            data: [],
            smooth: true
          }
        ]
      }
    }
  },
  methods: {
    // 请求顶部数据
    fetchTop () {
      UpdateNum().then((res) => {
        // console.log(res)
        if (res.data.code === 200) {
          this.item = res.data.data.list
        }
      })
    },
    initChart () {
      this.chart = this.$echarts.init(this.$refs.chart)
      this.chart2 = this.$echarts.init(this.$refs.chart2)

      // 请求图表数据
    },
    fetchChart () {
      // one 图
      ChartNumber().then((res) => {
        // console.log(res)
        if (res.data.code === 200) {
          this.option.series[0].data = res.data.data.list
          this.chart.setOption(this.option)
        }
      })
    },
    fetchChart1 () {
      // one 图
      ChartNumber2().then((res) => {
        // console.log(res)
        if (res.data.code === 200) {
          this.chartIcon = res.data.data.list
          for (let i = 0; i < this.chartIcon.length; i++) {
            this.chartname1.push(this.chartIcon[i].name)
            this.chartnum11.push(this.chartIcon[i].number)
            this.chartnum21.push(this.chartIcon[i].number1)
          }
          this.option1.xAxis.data = this.chartname1
          this.option1.series[0].data = this.chartnum11
          this.option1.series[1].data = this.chartnum21
          // 使用刚指定的配置项和数据显示图表
          console.log(this.option1)
          this.chart2.setOption(this.option1)
        }
      })
    }

  },
  mounted () {
    this.initChart()
  },
  created () {
    this.fetchTop()
    this.fetchChart()
    this.fetchChart1()
  }
}

</script>

<style lang="scss" scoped>
.el-main{
  min-width: 1200px;

.grid-content{
  background-color: #ffffff;
  .top{
    padding: 20px;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    .top-rt{
      .top-rt-s{
        color: #333;
        font-size: 14px;
        font-weight: 500;
      }
    }
    .top-lt{
      color: #333;
      font-size: 14px;
      font-weight: 500;
    }
  }
  .center{
    padding: 20px;
    .center-c{
      font-size: 30px;
      font-weight: 600;
      font-family: PingFangSC-Semibold,PingFang SC;
      color: #333;
      // border-bottom: 1px solid black;
    }
  }
  .bot{
    border-top: 1px solid  #e6ebf5;
    padding: 20px;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    .bot-rt{
      .bot-rt-s{
        color: #333;
        font-size: 14px;
        font-weight: 500;
      }
    }
    .bot-lt{
      color: #333;
      font-size: 14px;
      font-weight: 500;
    }
  }
}
.el-col {
  margin-top: 20px;
}
}
</style>
